<template>
  <van-tabs class="ul" @click="getPic">
    <van-tab
      class="li"
      v-for="item in goods"
      :title="item.name"
      :key="item.cid"
    >
      <van-grid
        class="pic"
        :border="true"
        :column-num="3"
        icon-size="50px 50px"
      >
        <van-grid-item
          v-for="value in item.sub_class"
          :key="value.id"
          :icon="value.icon"
          :text="value.name"
        >

        </van-grid-item>
      </van-grid>
      <!-- {{item.name}} -->
    </van-tab>
  </van-tabs>
</template>

<script>
import { getGoods } from "@/api/list";
export default {
  data() {
    return {
      goods: [],
      /*       goodsList: [],
      goodpic: [],
      goodsCli:[], */
      type: 1,
    };
  },
/*   created(){
    // this.bus.$emit()
    console.log(created);
  }, */
  async mounted() {
    let type = this.type;
    let ret = await getGoods(type);
    // console.log(ret);
    // console.log(ret.data);
    this.goods = ret.data;
    // console.log(this.goods);
    // this.goods = [...this.goods, ...ret.data];

    if (ret.data.length > 0) {
      this.type++;
    }
  },
  methods: {
    getPic(index, title) {},
  },
};
</script>

<style lang="scss" scoped>
.ul {
  height: 44px;
  background-color: chartreuse;
  margin-top: 44px;
  font-size: 16px;
}
/* .li {
    position: fixed;
  top: 44px;
} */
.pic {
  height: 250px;
  overflow: hidden;
}
/* .picture{
  display: flex;
  flex-direction: row;
} */
</style>